<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="min-h-screen bg-gray-50">
    <!-- banner图-->
    <section class="relative h-[600px] overflow-hidden">
      <div class="absolute inset-0">
        <img src="https://ai-public.mastergo.com/ai/img_res/3a72d8e4300d635f49240f6440fd62bf.jpg"
             class="w-full h-full object-cover object-center" alt="hero background" />
        <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent"></div>
      </div>
      <div class="relative container mx-auto px-6 h-full flex items-center">
        <div class="max-w-2xl text-white">
          <h1 class="text-5xl font-bold mb-6">探索世界的每个角落</h1>
          <p class="text-xl mb-8">让我们带您开启一段难忘的旅程，发现世界各地的美景与文化</p>
          <div class="flex gap-4">
            <button 
                class="!rounded-button bg-blue-600 text-white px-8 py-3 text-lg whitespace-nowrap hover:bg-blue-700"
                @click="toScenicSpotView(1)"
            >
              立即预订
            </button>
            <button class="!rounded-button bg-white/20 text-white border-2 border-white px-8 py-3 text-lg whitespace-nowrap hover:bg-white/30">
              了解更多
            </button>
          </div>
        </div>
      </div>
    </section>
    <!-- 热门景区推荐 -->
    <section class="py-16 container mx-auto px-6">
      <h2 class="text-3xl font-bold mb-12 text-center">热门景区推荐</h2>
      <div class="grid grid-cols-4 gap-6">
        <div v-for="(destination, index) in popularDestinations" :key="index"
             class="group rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow"
             @click="toScenicSpotView(destination.id)">
          <div class="relative h-64 overflow-hidden">
            <img :src="`${SERVER_ADDR}/category/pic/${destination.picList[0].url}`" :alt="destination.name" class="w-full h-full object-cover object-top transition-transform duration-300 group-hover:scale-110" />
            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
            <div class="absolute bottom-4 left-4 text-white">
              <h3 class="text-xl font-bold">{{ destination.name }}</h3>
              <p class="text-sm opacity-90">{{ destination.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--精选旅游攻略 -->
    <section class="py-16 bg-gray-100">
      <div class="container mx-auto px-6">
        <h2 class="text-3xl font-bold mb-12 text-center">精选旅游攻略</h2>
        <div class="grid grid-cols-3 gap-8">
          <div v-for="(guide, index) in strategyGuides.list"
               :key="index"
               class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow"
               @click="toGuideView(guide.id)">
            <div class="h-48 overflow-hidden">
              <img :src="`${SERVER_ADDR}/category/pic/${guide.pic}`" :alt="guide.title" class="w-full h-full object-cover object-top" />
            </div>
            <div class="p-6">
              <div v-if="guide.user" class="flex items-center mb-4">
                <img :src="`${SERVER_ADDR}/category/pic/${guide.user.avatar}`" alt="author" class="w-10 h-10 rounded-full object-cover" />
                <div class="ml-3">
                  <p class="font-medium">{{ guide.realname }}</p>
                  <p class="text-sm text-gray-500">{{ guide.departureDate }}</p>
                </div>
              </div>
              <h3 class="text-xl font-bold mb-2">{{ guide.title }}</h3>
              <p class="text-gray-600 mb-4 line-clamp-2">{{ guide.description }}</p>
              <div class="flex items-center text-sm text-gray-500">
                <el-icon class="mr-2"><ChatDotRound/></el-icon>
                <span>{{ guide.comments ? guide.comments.length: '暂无'}} 评论</span>
                <el-icon class="ml-4 mr-2"><Star /></el-icon>
                <span>20 收藏</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 旅行分类 -->
    <section class="py-16 container mx-auto px-6">
      <h2 class="text-3xl font-bold mb-12 text-center">旅行分类</h2>
      <div class="grid grid-cols-4 gap-6">
        <div v-for="(category, index) in categories"
             :key="index"
             class="group relative h-80 rounded-xl overflow-hidden cursor-pointer"
        >
          <RouterLink :to="`/user/search${category.id}`">
            <el-image :src="`${SERVER_ADDR}/category/pic/${category.pic}`" :alt="category.name"
                      class="w-full h-full object-cover object-top transition-transform duration-300 group-hover:scale-110"/>
            <div class="absolute inset-0 bg-black/40 group-hover:bg-black/50 transition-colors"></div>
            <div class="absolute inset-0 flex flex-col items-center justify-center text-white">
              <el-icon class="text-4xl mb-4"><component :is="category.icon" /></el-icon>
              <h3 class="text-xl font-bold mb-2">{{ category.name }}</h3>
              <p class="text-sm opacity-90">{{ category.count }}+ 子分类</p>
            </div>
          </RouterLink>

        </div>
      </div>
    </section>
  </div>
</template>
<script  setup>
import { ref } from 'vue';
import {Search, View, Star, Ship, Sunny, Camera, Location, ChatDotRound} from '@element-plus/icons-vue';
import categoryApi from "@/api/categoryApi.js";
import scenicSpotApi from "@/api/scenicSpotApi.js";
import strategyApi from "@/api/strategyApi";
import {useRouter} from "vue-router";
//服务器的地址
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR);
const router = useRouter();
const popularDestinations = ref([]);
const strategyGuides = ref([]);
const categories = ref([
  {
    id: null,
    name: null,
    count: null,
    icon: null,
    pic: null,
  }
]);
// 获取父分类
const getAllParent = () => {
  categoryApi.selectAllParent().then(resp => {
    if (resp.code === 10000){
      categories.value = resp.data;
    }
  })
}
// 获取排名前四的景点
const getTopFourScenicSpot = () => {
  scenicSpotApi.selectByRank().then(resp => {
    if (resp.code === 10000){
      popularDestinations.value = resp.data;
    }
  })
}
// 获取攻略
const getStrategy = () => {
  const condition = {}
  strategyApi.selectAll(condition,null,null).then(resp => {
    console.log(resp)
    if (resp.code === 10000){
      strategyGuides.value = resp.data;
    }
  })
}
// 点击分类跳转都对应父分类的界面
const handleClick = (id) => {
  router.push({
    path: '/user/category',
    query: {
      id: id
    }
  })
}
//跳转到商品详情页
const toScenicSpotView = (id)=>{
  router.push({
    path: '/user/scenicSpot',
    query: {
      id
    }
  });
}
// 跳转到攻略详情页
const toGuideView = (id)=>{
  router.push({
    path: '/user/strategy',
    query: {
      id
    }
  });
}
getStrategy();
getAllParent();
getTopFourScenicSpot();
</script>
<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
